
import { EditOutlined } from "@ant-design/icons";
import {
  Button,
  Col,
  Radio,
  Drawer,
  Form,
  Input,
  Row,
  Select,
  Space,
} from "antd";

import '../assets/style/profile.css'

import React, { useState } from "react";
const { Option } = Select;

export default function Profile() {
  // 用户信息
  const user=JSON.parse(localStorage.user)

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const [value, setValue] = useState(1);
  const onChange = (e) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };

  return (
    <div
      style={{
        height: "350px",
        border: "1px solid #eee",
        marginBottom: "200px",
        width: "100%",
      }}
    >
      <div className="ant-box">
        <div className="personal-edit">
          <Button type="link" onClick={showDrawer}>
            编辑资料
          </Button>
        </div>
        <div style={{ display: "flex" }}>
          <div
            style={{
              marginTop: "20px",
              marginLeft: "20px",
              height: "208px",
              width: "206px",
              display: "flex",
              flexWrap: "wrap",
              alignContent: "space-between",
              justifyContent: "center",
            }}
          >
            <div>
              <img
                src="http://xawn.f3322.net:8002/distremote/static/avatar/c7c4ee7be3eb4e73a19887dc713505145.jpg"
                style={{ width: "160px", height: "160px" }}
              />
            </div>
            <div style={{ width: "206px", textAlign: "center" }}>
              <Button icon={<EditOutlined />}>修改头像</Button>
            </div>
          </div>
          <div
            style={{
              height: "208px",
              width: "410px",
              display: "flex",
              flexWrap: "wrap",
              alignContent: "space-between",
              marginLeft: "20px",
              marginTop: "20px",
            }}
          >
            <div style={{ width: "410px" }}>
              账户：<span>{user.username}</span>3
            </div>
            <div style={{ width: "410px" }}>
              角色：<span>{user.roleName}</span>
            </div>
            <div style={{ width: "410px" }}>
              性别：<span>保密</span>
            </div>
            <div style={{ width: "410px" }}>
              电话：<span>{user.mobile}</span>
            </div>
            <div style={{ width: "410px" }}>
              邮箱：<span>{user.email}</span>
            </div>
            <div style={{ width: "410px" }}>
              部门：<span>{user.deptName}</span>
            </div>
            <div style={{ width: "410px" }}>
              描述：<span>保密</span>
            </div>
          </div>
        </div>
        <>
          <Drawer
            title="编辑资料"
            width={580}
            onClose={onClose}
            open={open}
            bodyStyle={{
              paddingBottom: 80,
            }}
            extra={
              <Space>
                <Button onClick={onClose}>取消</Button>
                <Button onClick={onClose} type="primary">
                  保存
                </Button>
              </Space>
            }
          >
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="email"
                    label="邮箱:"
                    rules={[
                      {
                        required: true,
                        message: "请输入你的邮箱",
                      },
                    ]}
                  >
                    <Input value={user.email} placeholder="请输入你的邮箱" />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="phone"
                    label="电话:"
                    rules={[
                      {
                        required: true,
                        message: "请输入你的电话",
                      },
                    ]}
                  >
                    <Input value={user.mobile} />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="department"
                    label="部门:"
                    rules={[
                      {
                        required: true,
                        message: "请输入你的部门",
                      },
                    ]}
                  >
                    <Select placeholder="请输入你的部门">
                      <Option value="开发部">开发部</Option>
                      <Option value="市场部">市场部</Option>
                      <Option value="人事部">人事部</Option>
                      <Option value="测试部">测试部</Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="gender"
                    label="性别:"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Radio.Group onChange={onChange} value={value}>
                      <Radio value={1}>男</Radio>
                      <Radio value={2}>女</Radio>
                      <Radio value={3}>保密</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={24}>
                  <Form.Item
                    name="describe"
                    label="描述"
                    rules={[
                      {
                        required: true,

                      },
                    ]}
                  >
                    <Input.TextArea
                      rows={4}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Drawer>
        </>
      </div>
    </div>
  );
}

